<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Validator</title>

  <link rel="stylesheet" type="text/css" href="test.css" media="screen" />
  <script type="text/javascript" src="core.js"></script>
  <script type="text/javascript" src="more.js"></script>
  <script type="text/javascript" src="../Source/Validator.js"></script>
  <script type="text/javascript" src="growl.js"></script>
  <script type="text/javascript">
    window.addEvent('domready', function() {
      var validator = new FormValidator($('test'));
      validator.addEvent('submit', function() {
        $('test').getElements('.error').each(function(el) {
          el.removeClass('error');
        });
      });
      validator.addEvent('error', function(e, errors) {
        var test    = $('test');
        var message = '';
        $H(errors).each(function(messages, name) {
          test[name].addClass('error');
          message += '<strong>' + name + ':</strong><br />';
          for (var i = 0, l = messages.length; i < l; i++) message += '<em>' + messages[i] + '</em><br/>';
          message += '<br/>';
        });
        Growl.Bezel({
          title:    'Errors in form',
          text:     message,
          duration: 5
        });
      });
    });
  </script>
</head>

<body>

<div id="wrap">
<div id="content-main">
  <h1>Validator test</h1>

  <form id="test" class="wide">
    <p>
      <label for="id_test_text">Text 1:</label>
      <input id="id_test_text" type="text" class="field-required" name="test_text" />
    </p>
    <p>
      <label for="id_test_textarea">Text 2:</label>
      <textarea id="id_test_textarea" type="textarea" class="field-required" name="test_textarea">Text area test</textarea>
    </p>
    <p>
      <label for="id_test_number">Number:</label>
      <input id="id_test_number" type="text" class="field-required field-number" name="test_number" />
    </p>
    <p>
      <label for="id_test_email">Email:</label>
      <input id="id_test_email" type="text" class="field-required field-email" name="test_email" value="test.box@example.org" />
    </p>
    <input type="submit" value="Validate" />
  </form>
</div>

<div id="content-related">
  <h2>Test</h2>

  <p>
    This is a simple test-suite demonstrating the Validator.js capabilities. In
    principle, the <em>FormValidator</em> class does no error-handling, it just
    passes the results of the validator through using the <em>error</em> event.
  </p>

  <h2>Error handling</h2>

  <p>
    The error handling is done by using the <a href="http://icebeat.bitacoras.com/mootools/growl/">Window.Growl</a>
    script by <a href="http://icebeat.bitacoras.com/">Daniel Mota</a>.
  </p>
</div>
</div>

</body>
</html>

